<template>
	<view class="queryRearch">
		<view class="h1">综合查询</view>
		<view class="searchInput">
			<input class="text" type="text" placeholder="输入企业名称、社会信用代码、法人姓名进行搜索" v-model="inputValue" :clearable="false"
				placeholder-class="placeholder-class" />
			<view class="send" @click="sendMessage()">
				<image src="/static/img/searchImg.png" mode=""></image>
			</view>
		</view>
		<view class="list">
			<view>
				<image src="/static/img/xz.png" mode=""></image>
				企业名称
			</view>
			<view>
				<image src="/static/img/xz.png" mode=""></image>
				社会信用代码
			</view>
			<view>
				<image src="/static/img/xz.png" mode=""></image>
				法人姓名
			</view>
		</view>
		<view class="history">
			<view class="title">最近搜索：</view>
			<view class="resultItem" v-for="(e, i) in historyList" :key="i" @click="resultItem(e)">
				{{ e }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
	
		},
		data() {
			return { 
				inputValue: '',
				historyKey: 'historyList2',
				historyList: []
			}
		},   
		methods: {
			sendMessage() {
				this.historyList  = uni.getStorageSync(this.historyKey) || [];    
				if(!this.historyList.includes(this.inputValue)){
					this.historyList.unshift(this.inputValue) 
					uni.setStorageSync(this.historyKey, this.historyList); 
				}
				this.toResultPage(this.inputValue);
				this.inputValue = ''
				
			},
			resultItem(e) { 
				this.toResultPage( e);
			},
			toResultPage(message){ 
				uni.navigateTo({
					url: '/pages/search/searchList?value='+message
				})
				
			}
		},
		watch: {
	
		},
	}
</script>

<style lang="scss">
	.queryRearch {
		background: url('/static/img/bg.062c536a.png') no-repeat;
		background-size: cover;
		height: 100vh;
		
		.h1 {
			display: inline-block;
			margin: 200rpx auto 60rpx;
			font-size: 54rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #00FAE7;
			width: 100%;
			text-align: center;
		}
		
		.searchInput {
			display: flex;
			justify-content: center;
			// width: 90%;
			height: 80rpx;
			margin: 0 auto;
			
			.text {
				width: 80%;
				height: 100%;
				background: #fff;
				text-indent: 1em;
				font-size: 22rpx;
			}
			
			.placeholder-class {
				font-size: 22rpx;
				text-indent: 1em;
			}
			
			.send {
				background: #00FAE7;
				padding: 15rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
		.list {
			display: flex;
			justify-content: center;
			margin: 50rpx auto 30rpx;	
			
			view {
				margin: 0 30rpx;
				display: flex;
				color: #00FAE7;
				align-items: center;
				font-size: 24rpx;
				
				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 10rpx 0 0;
				}
			}
		}
		
		.history {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			color: #00FAE7;
			font-size: 24rpx;
			width: 90%;
			margin: 0 auto;
			
			.resultItem+.resultItem {
				margin: 0 0 0 10rpx;
			}
		}
	}
</style>